import { Modal, Button } from 'antd';
import { userDisable, userDelete } from '@/api/user';
import { useEffect, useState } from 'react';
const UserEvent = (props: {
    params: { userId: string; open: boolean; isDelete: boolean; disabled: boolean };
    confirmCallBack: any;
    onCancel: any;
    titleText: string;
    contentTextOne: string;
    contentTextTwo: string;
    confirmText: string;
    btnLoading: boolean;
    openType: number; // 1 启用  2 禁用  3 删除
}) => {
    const { onCancel, titleText, contentTextOne, contentTextTwo, confirmText, openType, btnLoading } = props;
    const { userId, open, isDelete, disabled } = props.params;

    const [btnConfrmLoading, setBtnConfrmLoading] = useState<boolean>(false);
    useEffect(() => {
        console.log(btnLoading, 'zoubuzou ');

        setBtnConfrmLoading(btnLoading);
    }, [btnLoading]);

    const isDeleteUser = () => {
        // 调用父组件的confirmCallBack方法，在父组件中调用删除接口,传值1过去，就是表示，在父组件中调用删除操作的接口
        props.confirmCallBack(1);
        // onCancel();
        // const params = {
        //     userId,
        // };
        // userDelete(params).then(res => {
        //     console.log(res);
        //     props.confirmCallBack();
        // });
    };
    const modifyStatus = () => {
        const params = {
            userId,
            isDisable: !disabled, // 是否是禁用  true禁用 false是不禁用
        };
        setBtnConfrmLoading(true);
        userDisable(params)
            .then(res => {
                setBtnConfrmLoading(false);
                props.confirmCallBack();
                onCancel();
            })
            .catch(err => {
                setBtnConfrmLoading(false);
                onCancel();
            });
    };
    return (
        <Modal
            width={480}
            maskClosable={false}
            centered={true}
            open={open}
            closeIcon={<img src={require('@/assets/images/close-modal.png')} onClick={onCancel} />}
        >
            <div className="modal-title">{titleText || 'Delete account'}</div>
            <div className="modal-tip">
                {/* {isDelete ? (
                    <>
                        <div>After confirmation, the user will be deleted.</div>
                        <div> This action cannot be undone.</div>
                    </>
                ) : (
                    'Are you sure to suspend this account?  After the account is suspended, the user cannot log in.'
                )} */}
                <div>{contentTextOne}</div>
                <div>{contentTextTwo}</div>
            </div>
            <div className="submit-btns">
                <Button onClick={onCancel} disabled={btnConfrmLoading}>
                    Cancel
                </Button>
                <Button
                    danger
                    type="primary"
                    loading={btnConfrmLoading}
                    onClick={() => {
                        if (openType === 3) {
                            isDeleteUser();
                        } else {
                            modifyStatus();
                        }
                    }}
                >
                    {/* {isDelete ? 'Delete' : 'Suspend'} */}
                    {confirmText || 'Confirm'}
                </Button>
            </div>
        </Modal>
    );
};
export default UserEvent;
